Ext.define('MyApp.view.FeedPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.feedpanel',

    layout: {
        type: 'fit'
    },
    collapseDirection: 'left',
    collapsible: false,
    title: 'Feeds',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            dockedItems: [
                {
                    xtype: 'toolbar',
                    itemId: 'toolbar',
                    dock: 'top',
                    items: [
                        {
                            xtype: 'button',
                            itemId: 'add',
                            iconCls: 'feed-add',
                            text: 'Add Feed'
                        },
                        {
                            xtype: 'button',
                            disabled: true,
                            itemId: 'remove',
                            iconCls: 'feed-remove',
                            text: 'Remove Feed'
                        }
                    ]
                }
            ],
            items: [
                {
                    xtype: 'dataview',
                    cls: 'feed-list',
                    itemId: 'dataview',
                    tpl: [
                        '<tpl for="."><div class="feed-list-item">{title}</div></tpl>'
                    ],
                    itemSelector: '.feed-list-item',
                    overItemCls: 'feed-list-item-hover',
                    singleSelect: true,
                    store: 'FeedStore',
                    trackOver: true
                }
            ]
        });

        me.callParent(arguments);
    }

});